<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>海贷产品</title>
    <link rel="stylesheet" href="../css/weui.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <link rel="stylesheet" href="../css/dropload.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    html {
        width: 100%;
    }

    header {
        text-align: center;
        height: 44px;
        line-height: 44px;
        border-bottom: 0.5px solid #bbbbbb;
    }

    img {
        width: 100%;
        border-radius: 10px;
    }

    .box {
        padding: 5px;
    }

    .listbox {
        overflow: hidden;
    }

    .list {
        float: left;
        padding: 10px 8px;
        padding-bottom: 1px;
        width: 50%;
    }

    .box {
        padding: 15px;
    }

    html {
        padding-bottom: 53px;
    }

    .weui-tab {
        position: fixed;
        bottom: 0;
        height: auto;
        width: 100%;
    }

    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
        color: #348afd;
    }

    .weui-tab__panel {
        display: none;
    }

    .block {
        display: block;
    }

    .weui-tabbar__item>img {
        padding: 2px;
        border-radius: 0px;
    }

    .weui-tabbar__item>p {
        font-size: 12px;
    }
</style>

<body>
    <div class="box">
        <div class="listbox">

        </div>
    </div>
    <div class="weui-tab">
        <div class="weui-tabbar">
            <a href="guanyu.html" class="weui-tabbar__item ">
                <img src=".././images/guanyuicont.png" data-oldsrc=".././images/guanyuicont.png" data-newsrc=".././images/newguanyuicont.png"
                    alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">关于海贷</p>
            </a>
            <a href="haidaichanpin.html" class="weui-tabbar__item weui-bar__item_on">
                <img src=".././images/newgengduo.png" data-oldsrc=".././images/gengduo.png" data-newsrc=".././images/newgengduo.png"
                    alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">海贷产品</p>
            </a>
            <a href="dingfan.html" class="weui-tabbar__item">
                <img src=".././images/dingdan.png" data-oldsrc=".././images/dingdan.png" data-newsrc=".././images/newdingdan.png"
                    alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">我的订单</p>
            </a>
            <a href="wode.html" class="weui-tabbar__item  ">
                <img src=".././images/geren.png" data-oldsrc=".././images/geren.png" data-newsrc=".././images/newgeren.png"
                    alt="" class="weui-tabbar__icon">
                <p class="weui-tabbar__label">我的</p>
            </a>
        </div>
    </div>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script src="../js/dropload.min.js"></script>
    <script>
        var http = localStorage.getItem('http')
        var UserId = localStorage.getItem('UserId')
        var Access_token = localStorage.getItem('Access_token')
        var Refresh_token = localStorage.getItem('Refresh_token');
        pageIndex = 0;
        pageSize = 10;
        $('.box').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                pageIndex++
                $.ajax({
                    type: 'GET',
                    headers: {
                        "Authorize": Access_token + '|' + Refresh_token,
                        "MemberId": UserId
                    },
                    url: http + "/api/product/GetProduct",
                    async: false,
                    data: {
                        "pageParameter.pageIndex": pageIndex,
                        "pageParameter.pageSize": pageSize
                    },
                    dataType: "json",
                    success: function (data) {
                        console.log(JSON.stringify(data))
                        if (data.type == 1) {
                            for (var i = 0; i < data.resultdata.Rows.length; i++) {
                                $('.listbox')[0].innerHTML +=
                                    `<div Id="${data.resultdata.Rows[i].Id}" class="list">
                                        <img  src="${data.resultdata.Rows[i].Image}" alt="">
                                    </div>
                                `
                                $('.list').unbind().click(function () {
                                    var id = $(this).attr('Id')
                                    window.location.href = './haidaichanpin/shengqingtishi.html?id=' + id
                                })
                            }
                            if (pageIndex == data.resultdata.Total) {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }

                        }

                        setTimeout(function () {
                            me.resetload();
                        }, 1000);
                    },
                    error: function (err) {
                        console.log(JSON.stringify(err))
                        // 锁定
                        me.lock();
                        // me.noData();
                        $('.dropload-load').html(`<div class="dropload-noData">获取错误</div>`)
                    }
                })
            }
        });
    </script>
</body>

</html>